<template>
	<div 
		class="glass-tag glass move-in"
		:style="{
			paddingRight: closable ? '25px' : '15px'
		}"
		@click="$emit('click', index)">
		<slot></slot>
		<span 
			v-if="closable"
			class="glass-tag__close cuIcon-close"
			@click.stop="close">
		</span>
	</div>
</template>

<script>
    export default {
		props: {
			closable: {
				type: Boolean,
				default: () => false
			},
			index: {
				type: Number,
			},
		},
        data() {
            return {

            }
        },
		methods: {
			close() {
				this.$emit('close', this.index)
			}
		}
    }
</script>

<style lang="scss" scoped>
	.glass-tag {
		position: relative;
		font-size: .8rem;
		padding: 7px 15px;
		display: inline-flex;
		border-radius: 20px;
		margin-right: 10px;
		margin-bottom: 10px;
		
		&__close {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>


